<script setup>
import {delete_menu, update_menu, status_menu, get_menu, list_menu_tree} from "@/apis/system/v1/menu.js";
import Button from "@/components/common/button.vue";
import Authority from "@/components/auth/Authority.vue";
import {Message} from "@arco-design/web-vue";

const emit = defineEmits(['search']);
const refresh = inject("reload");
const isSearch = ref(true);
const visible = ref(false);
const search = () => {
  isSearch.value = !isSearch.value;
  emit("search", isSearch.value);
};
const select = () => {
  visible.value = true;
};
// 多选和单选
const expandedKeys = ref([]);
for (let i = 0; i < 16; i++) {
  expandedKeys.value.push(i);
}
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
});
const form = reactive({
  loading: false,
  sort: true,
  status: true,
  type: true,
  icon: true,
  title: true,
  path: true,
  time: true,
});
const renovate = () => {
  form.loading = !form.loading;
  setTimeout(() => {
    getMenuList();
    form.loading = !form.loading;
  }, 1000);
};

const menuList = ref([]);
const permissions = ["sys:menu:view", "sys:menu:update", "sys:menu:delete", "sys:menu:add"];
const menuState = (record) => {
  status_menu(record.id).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
    } else {
      Message.success(res.message);
    }
  });
};
const deleteMenu = (id) => {
  delete_menu(id).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
      refresh();
    } else {
      Message.success(res.message);
      refresh();
    }
  });
};
const isEdit = ref(false);
const editMenu = (id) => {
  get_menu(id).then(res => {
    menuObj.value = res.result;
    isEdit.value = true;
    res.result.sort = res.result.sort + "";
    res.result.type = res.result.type + "";
  });
};
const editMenuOk = (id) => {
  delete menuObj.value.id;
  delete menuObj.value.parent;
  delete menuObj.value.create_datetime;
  delete menuObj.value.update_datetime;
  update_menu(id, menuObj.value).then(res => {
    if (res.code !== 200) {
      Message.error(res.message);
      refresh();
    } else {
      Message.success("修改成功");
      refresh();
    }
  });
};
const menuObj = ref({});
const isView = ref(false);
const closeView = () => {
  isView.value = false;
};
const getMenuObj = (id) => {
  get_menu(id).then(res => {
    menuObj.value = res.result;
    isView.value = true;
    res.result.sort = res.result.sort + "";
    res.result.type = res.result.type + "";
  });
};
const getMenuList = () => {
  list_menu_tree().then(res => {
    res.result.map(item => {
      item.key = item.id;
      item.children.map(item => {
        item.key = item.id;
      });
    });
    menuList.value = res.result;
  });
};

onMounted(() => {
  getMenuList();
});
</script>

<template>
  <div class="jia-handle">
    <Button :permissions="permissions"></Button>
    <div class="jia-operate">
      <div style="border-radius: 5px 0 0 5px" class="jia-flex-center"
           @click="search">
        <icon-search size="14"/>
      </div>
      <div class="jia-flex-center" @click="renovate">
        <icon-sync size="14"/>
      </div>
      <div style="border-radius: 0 5px 5px 0" class="jia-flex-center" @click="select">
        <icon-select-all size="14"/>
        <a-modal v-model:visible="visible" draggable
                 title="菜单选项" width="200px">
          <a-checkbox v-model="form.sort">排序</a-checkbox>
          <a-checkbox v-model="form.status">状态</a-checkbox>
          <a-checkbox v-model="form.type">类型</a-checkbox>
          <a-checkbox v-model="form.icon">图标</a-checkbox>
          <a-checkbox v-model="form.title">菜单标题</a-checkbox>
          <a-checkbox v-model="form.path">路由地址</a-checkbox>
          <a-checkbox v-model="form.time">创建时间</a-checkbox>
        </a-modal>
      </div>
    </div>
  </div>
  <a-table v-if="menuList.length > 0" v-model:expandedKeys="expandedKeys"
           :defaultExpandAllRows="true" :loading="form.loading"
           :row-selection="rowSelection" :data="menuList" show-empty-tree>
    <template #columns>
      <a-table-column v-if="form.title" title="菜单标题" data-index="title"></a-table-column>
      <a-table-column v-if="form.icon" title="图标" data-index="icon">
        <template #cell="{ record }">
          <component :is="record.icon"></component>
        </template>
      </a-table-column>
      <a-table-column v-if="form.path" title="路由地址" data-index="path"></a-table-column>
      <a-table-column v-if="form.sort" title="排序" data-index="sort"></a-table-column>
      <a-table-column v-if="form.status" title="状态" data-index="status">
        <template #cell="{ record }">
          <Authority>
            <template #default="{ userPermissions }">
              <a-switch v-model="record.status" @change="menuState(record)"
                        :disabled="!userPermissions.includes('sys:menu:update')"
                        :checked-value="true" :unchecked-value="false"
                        checked-color="#1890ff" unchecked-color="#F56C6C">
                <template #checked>
                  <span>正常</span>
                </template>
                <template #unchecked>
                  <span>禁用</span>
                </template>
              </a-switch>
            </template>
          </Authority>
        </template>
      </a-table-column>
      <a-table-column v-if="form.type" title="类型" data-index="type">
        <template #cell="{ record }">
          <a-tag style="border-radius: 6px" color="green" v-if="record.type === 0">目录</a-tag>
          <a-tag style="border-radius: 6px" color="blue" v-else>菜单</a-tag>
        </template>
      </a-table-column>
      <a-table-column v-if="form.time" title="创建时间" data-index="create_datetime"></a-table-column>
      <a-table-column :width=160 title="操作" data-index="operate">
        <template #cell="{ record }">
          <Authority>
            <template #default="{ userPermissions }">
              <a-button class="table-button" type="primary" @click="editMenu(record.id)"
                        :disabled="!userPermissions.includes('sys:menu:update')">
                <template #icon>
                  <icon-edit/>
                </template>
              </a-button>
            </template>
          </Authority>
          <Authority>
            <template #default="{ userPermissions }">
              <a-popconfirm content="是否确认删除？" @ok="deleteMenu(record.id)">
                <a-button class="table-button" type="primary" status="danger"
                          :disabled="!userPermissions.includes('sys:menu:delete')">
                  <template #icon>
                    <icon-delete/>
                  </template>
                </a-button>
              </a-popconfirm>
            </template>
          </Authority>
          <Authority permission="sys:menu:view">
            <a-button v-if="record.type !== 0" class="table-button" type="primary" status="success"
                      @click="getMenuObj(record.id)">
              <template #icon>
                <icon-eye/>
              </template>
            </a-button>
          </Authority>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <a-modal @ok="editMenuOk(menuObj.id)" v-model:visible="isEdit" title="编辑菜单" width="550px">
    <a-form :model="menuObj" layout="inline">
      <a-form-item field="title" label="菜单名称" required>
        <a-input v-model="menuObj.title" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="请输入菜单名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="parent" label="上级菜单">
        <a-select v-model="menuObj.parent" :style="{ width: '150px', borderRadius: '5px' }"
                  placeholder="请选择上级菜单" disabled>
          <a-option :value="1">仪态表</a-option>
          <a-option :value="3">系统管理</a-option>
          <a-option :value="9">系统监控</a-option>
          <a-option :value="12">前台管理</a-option>
          <a-option :value="14">系统设置</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="icon" label="菜单图标" required>
        <a-input v-model="menuObj.icon" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="图标" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="sort" label="菜单排序">
        <a-input v-model="menuObj.sort" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="排序" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="path" label="菜单路由" required>
        <a-input v-model="menuObj.path" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="路由" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="component" label="组件路径">
        <a-input v-model="menuObj.component" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="路径" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="name" label="组件名称" required>
        <a-input v-model="menuObj.component" :style="{ width: '150px', borderRadius: '5px' }"
                 placeholder="组件名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="status" label="菜单状态">
        <a-radio-group v-model="menuObj.status">
          <a-radio :value="true">启用</a-radio>
          <a-radio :value="false">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="status" label="菜单类型" required>
        <a-radio-group v-model="menuObj.type" disabled>
          <a-radio value="0">目录</a-radio>
          <a-radio value="1">菜单</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-drawer :width="950" :visible="isView" unmountOnClose
            @ok="closeView" @cancel="closeView">
    <template #title>查看</template>
    <a-form style="margin-top: 20px" :model="menuObj" layout="inline">
      <a-form-item class="jia-form-item" field="title" label="菜单名称" required>
        <a-input v-model="menuObj.title" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="请输入菜单名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="parent" label="上级菜单">
        <a-select v-model="menuObj.parent" :style="{ width: '344px', borderRadius: '5px' }"
                  placeholder="请选择上级菜单">
          <a-option :value="1">仪态表</a-option>
          <a-option :value="3">系统管理</a-option>
          <a-option :value="9">系统监控</a-option>
          <a-option :value="12">前台管理</a-option>
          <a-option :value="14">系统设置</a-option>
        </a-select>
      </a-form-item>
      <a-form-item class="jia-form-item" field="icon" label="菜单图标" required>
        <a-input v-model="menuObj.icon" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="图标" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="sort" label="菜单排序">
        <a-input v-model="menuObj.sort" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="排序" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="path" label="菜单路由" required>
        <a-input v-model="menuObj.path" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="路由" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="component" label="组件路径">
        <a-input v-model="menuObj.component" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="路径" allow-clear></a-input>
      </a-form-item>
      <a-form-item class="jia-form-item" field="name" label="组件名称" required>
        <a-input v-model="menuObj.component" :style="{ width: '344px', borderRadius: '5px' }"
                 placeholder="组件名称" allow-clear></a-input>
      </a-form-item>
      <a-form-item field="status" label="菜单状态">
        <a-radio-group v-model="menuObj.status">
          <a-radio :value="true">启用</a-radio>
          <a-radio :value="false">禁用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="status" label="菜单类型" required>
        <a-radio-group v-model="menuObj.type">
          <a-radio value="0">目录</a-radio>
          <a-radio value="1">菜单</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<style scoped lang="less">
.jia-handle {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .jia-operate {
    width: 135px;
    height: 100%;
    display: flex;

    div {
      cursor: pointer;
      width: 44px;
      height: 29px;
      color: #885DFD;
      border: 1px solid #e8e8e8;

      &:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }

      &:hover {
        background: var(--active-bg1);
      }
    }
  }
}

.table-button {
  border-radius: 5px;
  margin-left: 5px;
}
</style>